<template>
  <div class="cn-wrap">
    <van-nav-bar title="昵称修改"
                 left-arrow
                 right-text="确定"
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <van-field class="cn-textarea"
               v-model="data.value"
               placeholder="请输入想要修改的昵称" />
    <van-icon class="cn-icon"
              name="bell"
              size="15"
              color="red" />
    <span>许多麻烦的要求</span>
  </div>
</template>
<script>
import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant'

export default {
  setup () {
    const { proxy } = getCurrentInstance()
    const data = reactive({ value: '' })
    function onClickLeft () {
      window.history.length > 1 ? proxy.$router.go(-1) : proxy.$router.push('/userinfo')
    }
    function onClickRight () {
      proxy.$axios.user.changeNick(data.value).then(res => {
        if (res.status === 200) {
          Toast.success('修改成功')
          data.value = ''
        }
      })
    }
    return {
      data, onClickLeft, onClickRight
    }
  }
}
</script>
<style lang="scss" scoped>
span {
  font-size: 10px;
}

.cn {
  &-icon {
    margin-left: 15px;
  }
  &-textarea {
    width: 95%;
    margin: 10px auto;
    border-radius: 15px;
  }
}
</style>
